<template>
  <div class="boxmr">
    <div class="l">
      <div class="one">Shopper active business</div>
      <div class="two">{{ getfg("2111123") }}</div>
    </div>
    <div class="mt-pri"><div id="mt-pri"></div></div>
  </div>
</template>

<script setup lang="ts">
import { getfg } from "@/utile/fg";
import { onMounted, watch, ref } from "vue";
import themstore from "@/store/themctel/index";
import { getshopdata } from "@/api/index";
const countdata = ref();
const nan = ref();
const nv = ref();
const usethemstore = themstore();
import * as echarts from "echarts";
const themcolor = ref<string>();
const themcolor2 = ref<string>();
watch(
  () => usethemstore.chagethem,
  () => {
    setcharts();
  }
);
onMounted(() => {
  setcharts();
  getuserdata();
});
const getuserdata = async () => {
  const res = await getshopdata(1, 9999, {
    id: "",
    titname: "",
    pername: "",
    phone: "",
    time: "",
    address: "",
    status: "",
  });
  if (res.code == 200) {
    countdata.value = res.data.count;
    nan.value = res.data.rows.filter((i: any) => i.sex == 1).length;
    nv.value = res.data.rows.filter((i: any) => i.sex == 0).length;
    console.log(res.value, "/ijopjkljlk");
    setcharts();
  }
};
const setcharts = () => {
  themcolor.value = getComputedStyle(document.documentElement).getPropertyValue(
    "--them-color"
  );
  themcolor2.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color2");
  const doms: HTMLDivElement = document.querySelector(
    "#mt-pri"
  ) as HTMLDivElement;
  const aa = echarts.init(doms);
  let option;
  let data = [
    { name: "男", weight: 3173 },
    { name: "女", weight: 6827 },
  ].map((item) => {
    return {
      name: item.name,
      value: Math.floor(item.weight * 1000) / 1000,
    };
  });
  option = {
    animation: true,
    tooltip: {
      show: true,
      backgroundColor: "#fff",
      borderColor: "#ddd",
      borderWidth: 1,
      formatter: (p: any) => {
        let txtCon =
          "<div style='text-align:left'>" +
          // `<div style="background:${p.color};width:15px;height:15px;borderRadius:50%"></div>` +
          `<span style='color:${p.color}'>` +
          p.name +
          `</span><br /><span style=color:${p.color}> ` +
          p.percent +
          "%</span></div>";
        return txtCon;
      },
      textStyle: {
        rich: {
          a: {
            fontSize: 28,
            background: "#e4ff00",
            with: "10",
          },
          b: {
            fontSize: 20,
            color: "#e4ff00",
            padding: [0, 0, 14, 0],
          },
          c: {
            fontSize: 20,
            color: "#fff",
            padding: [5, 0],
          },
        },
      },
    },
    series: {
      type: "pie",
      radius: ["35%", "70%"],
      data: data,
      color: [
        themcolor2.value,
        themcolor.value,
        "#9BE2E8",
        "#6DC8EC",
        "#6E8CDE",
        "#EB5A49",
        "#FB9E02",
        "#F7DE2C",
        "#FF7081",
        "#F7DE2C",
        "#3C97F2",
        "#EB5A49",
        "#44CC86",
        "#9BE2E8",
        "#FB9E02",
        "#6DC8EC",
        "#6E8CDE",
        "#FF7081",
      ],
      labelLine: {
        show: false,
      },
      label: {
        show: false,
        // position:'inner',
        formatter: "{d}%",
      },
    },
  };
  aa.setOption(option);
};
</script>

<style scoped lang="scss">
.boxmr {
  height: 100%;
  width: 100%;
  padding: 10px;
  display: flex;
  .l {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    gap: 20px;
    overflow: hidden;
    .one {
      color: #a6a8ac;
      font-size: 0.7vw;
      white-space: nowrap;
    }
    .two {
      font-size: 1.2vw;
      font-weight: 700;
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .three {
      display: flex;
      gap: 5px;
      font-size: 0.65vw;
      color: #a6a8ac;
      .iconfont {
        color: var(--them-color);
        font-size: 0.7vw;
      }
    }
  }
  .mt-pri {
    height: 100%;
    width: 50%;
    border-radius: 10px;
    #mt-pri {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
